<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!--
        关于 Vue 中的数据代理：
            1. 什么是数据代理？
                (1). 配置对象 data 中的数据，会被收集到 vm._data 中，然后通过 Object.defineProperty 让 vm 上拥有 data 中所有的数据
                (2). 当访问 vm 的 msg 时，返回的是 data 当中同名属性的值
                (3). 当修改 vm 的 msg 时，修改的是 data 当中同名属性的值
            2. 为什么要数据代理？
                为了更加方便的读取和修改 data 中的数据，不做数据代理，就要：vm._data.xxx 访问数据
            3. 扩展思考？—— 为什么要先收集在 _data 中，然后再代理出去？
                更高效的监视数据（直接收集到 vm 上会导致监视效率太低）
    -->
    <div id="root">
        <h2>学校名字：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <h2>学科：{{subject}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
                address: '宏福科技园综合楼',
                subject: '前端'
            }
        });

        // 打印地址
        console.log(vm.address); // 通过 vm 可以读取到 data 中的 address
        vm.address = "北七家镇";  // 通过 vm 可以修改 data 中的 address
        // 解构赋值
        const {_data} = vm;
        console.log(_data.name);

        // 连续解构赋值
        const {_data:{name}} = vm;
        console.log(name);

        console.log(vm)
    </script>
</body>
</html>
